<template>
    <div>
        <el-tabs tab-position="top" v-model="activeName">
            <!-- 用户资料 -->
            <el-tab-pane :label="$i18n.t('USER_INFO')" name="default">
                <loaned-user-info />
            </el-tab-pane>
            <!-- 订单详情 -->
            <el-tab-pane :label="$i18n.t('ORDER_INFO')" name="order">
                <loaned-order-info v-if="activeName === 'order'" />
            </el-tab-pane>
            <!-- 任务跟进 -->
            <el-tab-pane :label="$i18n.t('TASK_FOLLOW')" name="follow">
                <loaned-follow v-if="activeName === 'follow'" />
            </el-tab-pane>
            <!-- 历史记录 -->
            <el-tab-pane :label="$i18n.t('HISTORY_RECORD')" name="history">
                <loaned-history-record v-if="activeName === 'history'" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import LoanedUserInfo from '@/views/loaned/components/UserInfo'
    import LoanedFollow from '@/views/loaned/components/TaskFollow'
    import LoanedOrderInfo from '@/views/loaned/components/OrderInfo'
    import LoanedHistoryRecord from '@/views/loaned/components/HistoryRecord'

    export default {
        name: 'LoanedDetail',
        components: {
            LoanedHistoryRecord,
            LoanedOrderInfo,
            LoanedFollow,
            LoanedUserInfo
        },
        data () {
            return {
                activeName: 'default'
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
